{% extends 'front/front_base.html' %}
{% from 'common/_macros.html' import static %}

{% block title -%}
    {{ post.title }}
{%- endblock %}

{% block head -%}
    <script src="{{ static('ueditor/ueditor.config.js') }}"></script>
    <script src="{{ static('ueditor/ueditor.all.min.js') }}"></script>
    <script src="{{ static('front/js/front_pdetail.js') }}"></script>
    <link rel="stylesheet" href="{{ static('front/css/front_pdetail.css') }}">
{%- endblock %}

{% block body -%}
    <div class="lg-container">
        <div class="post-container">
            <h2>{{ post.title }}</h2>
            <p class="post-info-group">
                <span>发表时间:{{ post.create_time|time_filter }}</span>
                <span>作者:{{ post.author.username }}</span>
                <span>所属板块:{{ post.board.name }}</span>
                <span style="float: right">阅读数:{{ post.readers|length }}</span>
                <span style="float: right">评论数:{{ post.comments|length }}</span>
            </p>
            <article class="post-content" id="post-content" data-id="{{ post.id }}">
                {{ post.content|safe }}
            </article>
        </div>
        <div class="comment-group">
            <h3>评论列表</h3>
            <hr>
            <ul class="comment-list-group">
                {% if post.comments %}
                    {% for comment in post.comments %}
                        <li>
                            <div class="avatar-group">
                                <img src="{{ post.author.avatar or static('common/images/avatar.png') }}" alt="用户头像">
                            </div>
                            <div class="comment-content">
                                <p class="author-info">
                                    <span>{{ post.author.username }}</span>
                                    <span>{{ comment.create_time|time_filter }}</span>
                                </p>
                                <p class="comment-txt">
                                    {{ comment.content|safe }}
                                </p>
                            </div>
                        </li>
                    {% endfor %}
                {% else %}
                    <p class="without-info">暂时还没有评论哦~~~</p>
                {% endif %}
            </ul>
        </div>
        <div class="add-comment-group">
            <h3>添加评论</h3>
            <script id="editor" type="text/plain" style="height: 150px;"></script>
            <div class="comment-btn-group">
                <button class="btn btn-primary" id='submit-comm-btn'> 提交评论</button>
            </div>
        </div>
    </div>
    <div class="sm-container"></div>
{%- endblock %}